<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@include file="/include/nocache.jsp" %>
<%
	Object obj=request.getSession().getAttribute("frontuser");
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
 	<meta http-equiv=X-UA-Compatible content=IE=EmulateIE7/>
  <title><s:property value="base.title"/></title>
	<!--[if IE]>
		<script type="text/javascript">
			(function(){
				var b=("abbr,article,aside,audio,canvas,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video").split(","),a=b.length;while(a--){document.createElement(b[a])}})();
		</script>
	<![endif]-->
  <style>
  	header, footer, nav, section, article {display:block;}<!--HTML5标签--> 
  	body{width:100%;height:100%;font-family:"Microsoft Yahei", "微软雅黑", Tahoma, Arial, Helvetica, STHeiti;font-size:12px;}
  	A{text-decoration:none;color:#34638c}
  	.mod-topbar{
  		z-index:1203;
  		position:fixed;
  		padding-bottom:0px;
  		height:40px;top:0px;
  		right:0px;
  		left:0px;
  		_height:38px;
  		_position:absolute;
  		background:url() repeat-x left top	
  	}
  	.mod-topbar .mod-topbar-bgframe{
  		border-bottom:medium none;
  		position:absolute;
  		filter:alpha(opacity=0); BORDER-LEFT: medium none;
  		width:100%;
  		height:40px;
  		border-top:medium none;
  		border-right:medium none;
  		opacity:0;
  	}
  	.mod-topbar .mod-topbar-pseudo-real{
  		background-color:#3fa7cb;
  		background:none transparent scroll repeat 0% 0%;
  	}
  	.clearfix:after{
  		height:0px;
  		clear:both;
  		content:'\20';
  	}
  	.clearfix{
  		zoom:1;
  	}
  	.mod-topbar .wrapper-box{
  		position:relative;
  		padding-bottom:0px;
  		margin:0px auto;
  		width:980px;
  		height:35px;
  	}
  	.mod-topbar .left-box{
  		float:left;
  		padding-top:3px;
  	}
  	.mod-topbar .center-box{
  		float:left;
  		heght:35px;
  		margin-left:50px
  	}
  	.mod-topbar .right-box{
  		margin-right:-7px;
  		float:right;
  		heght:35px;
  	}
  	.mod-topbar .logo-box{
  		float:left;
  		margin-left:10px;
  	}
  	.mod-topbar .q-logo{
  		width:93px;
  		height:30px;
  		_background-image:none;
  		background:url() no-repeat left top
  	}
  	.fontcls{font-family:"Microsoft Yahei", "微软雅黑", Tahoma, Arial, Helvetica, STHeiti;font-size:12px}
  	.fontcls14{font-family:"Microsoft Yahei", "微软雅黑", Tahoma, Arial, Helvetica, STHeiti;font-size:14px}
  	.fontcls16{font-family:"Microsoft Yahei", "微软雅黑", Tahoma, Arial, Helvetica, STHeiti;font-size:16px}
  	.fontcls50{font-family:"Microsoft Yahei", "微软雅黑", Tahoma, Arial, Helvetica, STHeiti;font-size:50px}
	.wordwrap {word-wrap:break-word;word-break:break-all;}  	
  	.mod-page-body{
  		min-height:100%;
  		height:auto;
  		_height:100%;
  		zoom:1;
  		color:#454545;
  	}
  	.mod-page-body .mod-page-main{
  		padding-bottom:85px;
  		padding-top:36px;
  	}
  	.mod-page-body .mod-page-main .x-page-container{
  		padding-bottom:0px;
  		margin:0px;
  		padding-left:0px;
  		padding-right:0px;
  		zoom:1;
  		padding-top:0px;
  	}
  	.grid-98{margin:0px auto;overflow:hidden;width:980px}
  	.grid-80{margin:0px auto;overflow:hidden;width:800px}
  	.mod-topspaceinfo{padding-bottom：45px;padding-left:0px;padding-right:0px;padding-top:45px}
  	.mod-topspaceinfo H1{padding-left:10px}
  	.mod-topspaceinfo H1 A{color:#555;font-size:50px}
  	.mod-topspaceinfo .mod-topspaceinfo-description{
  		line-height:2em;
  		color:#000;
  		font-size:14px;
  	}
  	.mod-content{
  		background-image:url(); 
  		BORDER-BOTTOM: #e1e1e1 1px solid;
  		background-color:#fff;
  		background-repeat:repeat-y;
  		background-position:center top;
  		border-top:#e1e1e1 1px solid;
  		box-shadow:0 -4px 10px #999;
  		-webkit-box-shadow:0 -4px 10px #999;
  		-moz-box-shadow:0 -4px 10px #999;
  		float:left;
  	}
  	.grid-77{
  		padding:0px;
  		margin:0px auto;
  		overflow:hidden;
  		width:770px;
  	}
  	
  	.divbutton{background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));background: -moz-linear-gradient(top,#fff,#eee);background:-o-linear-gradient(top,#fff,#eee);filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eeeeee');background:linear-gradient(top, #fff, #eee);border:1px #ddd solid;padding:5px;display:inline-block;}
  </style>
 </head>

 <body background="${pageContext.request.contextPath}/front/imgs/bodybg.png" style="background-color:#f8f8f8">
 	<jsp:include page="/front/common/header.jsp"></jsp:include>
	<section class="mod-page-body">
		<div class="mod-page-main wordwrap clearfix">
			<div class="x-page-container">
				<jsp:include page="/front/common/contentHeader.jsp"></jsp:include>
				<div class="grid-80" style="margin-top:-5px;">
					<!-- 文章区 -->
					<div style="margin-bottom:20px;margin-left:10px;_margin-left:5px;background:#fff;min-height:300px;border:#ccc 1px solid">
						<div style="padding-top:20px;padding-left:20px;padding-right:20px;">
						<div style='float:left;font-family:"Microsoft Yahei", "微软雅黑", Tahoma, Arial, Helvetica, STHeiti;font-size:20px;color:#515151;font-weight:normal;float:left'>
							<s:property value="base.title"/>
						</div>
						<div style='float:left;margin-left:5px'>
							<!-- Baidu Button BEGIN -->
						    <div id="bdshare" class="bdshare_t bds_tools get-codes-bdshare">
						        <span class="bds_more"></span>
						    </div>
							<script type="text/javascript" id="bdshare_js" data="type=tools&amp;uid=382910" ></script>
							<script type="text/javascript" id="bdshell_js"></script>
							<script type="text/javascript">
								document.getElementById("bdshell_js").src = "${pageContext.request.contextPath}/script/shell_v2.js?cdnversion=" + new Date().getHours();
							</script>
							<!-- Baidu Button END -->
						</div>
						<DIV style="float:right;"><SPAN style='color:#c5c5c5;font-size:12px;line-height:30px;font-family:"Microsoft Yahei", "微软雅黑", Tahoma, Arial, Helvetica, STHeiti'><s:date format="yyyy-MM-dd HH:mm" name="base.creattime"/></SPAN></DIV>
						</div>
						<div style='padding-top:0px;padding-left:20px;padding-right:20px;margin-top:50px;line-height:20px;width:758px;font-size:14px;overflow:hidden;font-family:"Microsoft Yahei", "微软雅黑", Tahoma, Arial, Helvetica, STHeiti;'>
							<s:property value="content.content" escape="false"/>
						</div>
						<div style="margin-right:20px;float:right;margin-top:-15px">
							<a style="color:#9F9F9F;text-decoration:none;font-size:13px;cursor:pointer;" onclick="showCommont()" id="liuyan">留言</a>
							<%if(obj!=null){%>
								&nbsp;<a style="color:#9F9F9F;text-decoration:none;font-size:13px;cursor:pointer;">编辑</a>
								&nbsp;<a style="color:#9F9F9F;text-decoration:none;font-size:13px;cursor:pointer;" onclick="deleteArt()">删除</a>							
							<%} %>
							&nbsp;<a style="color:#9F9F9F;text-decoration:none;font-size:13px">浏览(<s:property value="base.viewcount"/>)</a>
						</div>
						<div style="height:10px"></div>
					</div>
					<div id="commentDetail" style="margin-left:10px;_margin-left:5px;border:solid 1px #ccc;background:#fff;display:none">
						<div style="margin-top:10px;margin-left:20px;margin-right:20px;height:150px;">
							<div style="margin-left:20px;margin-top: 10px">
								<a style="color:#9F9F9F;text-decoration:none;font-size:14px;">留言</a>
							</div>
							<div style="height:10px">&nbsp;</div>
							<div style="margin-left:20px;">
								<textarea id="liuyantext" style="width:650px;height:100px" onblur="changeLiuYan(this,2)" onfocus="changeLiuYan(this,1)">最多输入300个字符......</textarea>
								<input type="submit" value="提 交" onclick="submitLiuYan()"/>						
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>
	<script src="${pageContext.request.contextPath}/script/jquery-1.9.1.min.js"></script>
	<script>
		var showFlag=1;
		function showCommont(){
			if(showFlag==1){
				$("#commentDetail").slideDown(100,function(){
					showFlag=0;
					$("#liuyan").html("收起");
				});
			}else{
				$("#commentDetail").slideUp(100,function(){
					showFlag=1;
					$("#liuyan").html("留言");
				});
			}
		}

		function changeLiuYan(obj,type){
			var $obj=$(obj);
			if(type==1){//获得焦点事件
				if($obj.val()=="最多输入300个字符......"){
					$obj.val("");
				}
			}
			if(type==2){//失去焦点事件
				if($.trim($obj.val())==""){
					$obj.val("最多输入300个字符......");
				}
			}
		}

		function submitLiuYan(obj){
			var liuyan=$("#liuyantext").val();
			if($.trim(liuyan)==""||$.trim(liuyan)=="最多输入300个字符......"){
				alert("请输入您的留言信息!");
			}else if(liuyan.length>300){
				alert("留言信息长度不能超过300！");	
				return ;
			}
			var url="${pageContext.request.contextPath}/blog/putCommonts.zhtml?base.id=<s:property value="base.id"/>&commont="+encodeURIComponent(liuyan)+"&_rad="+new Date().getTime();
			$.get(url,function(data){
				if(data=="-1"){
					alert("输入参数非法!");
				}else{
					$("#liuyantext").val("");
					alert("您的评论已经提交。我们会尽快处理的。");
				}
			})
		}

		function deleteArt(){
			if(confirm("确定要删除这篇文章吗？")){
				var url="${pageContext.request.contextPath}/blog/deleteBolg.zhtml?base.id=<s:property value="base.id"/>&_rad="+new Date().getTime();
				alert(url); 
				$.get(url,function(data){
					alert(data);
					if(data=="-1"){
						alert("参数错误！");	
					}else{
						window.location="/blog/frontIndex.zhtml";
					}
				});
			}
		}
	</script>
 </body>
</html>
						